import gradio as gr

# 定义 JS 函数：验证输入是否为空 + 修改按钮样式
validate_input_js = """
function(input_value, button_element) {
  // input_value：对应 inputs 中传入的 Textbox 值
  // button_element：对应触发事件的按钮 DOM 元素
  
  if (!input_value) {
    alert("输入不能为空！"); // 弹窗提示
    button_element.style.backgroundColor = "red"; // 修改按钮背景色
    return false; // 阻止后续 Python 函数执行
  } else {
    button_element.style.backgroundColor = "green";
    console.log("输入有效：", input_value);
    return input_value; // 传递值给后续 Python 函数
  }
}
"""

with gr.Blocks() as demo:
  input_box = gr.Textbox(label="请输入内容")
  submit_btn = gr.Button("提交", elem_id="submit-btn")  # 给组件加 elem_id，方便 JS 定位

  # 按钮点击事件：先执行 JS 验证，再执行 Python 函数
  submit_btn.click(
    fn=lambda x: f"你输入的是：{x}",  # Python 逻辑
    inputs=input_box,
    outputs=gr.Textbox(label="输出结果"),
    js=validate_input_js  # 关键：绑定 JS 函数（参数顺序=inputs+触发组件）
  )

if __name__ == "__main__":
  demo.launch()